﻿<?php 
$mediaPath=$baseUrl.'media/';
$cdn=$baseUrl.'images/';
$baseUrl = base_url ();
$dialogs=$pageMeta['dialogues']
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<!-- #BeginTemplate "main.html.dwt" -->
<head>
<!-- #BeginEditable "doctitle" -->
<title>Lesson</title>
<!-- #EndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width; initial-scale=1.0;" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="alternate" type="application/rss+xml" title="RSS feed" href="/rss" />
<link type="text/css" rel="stylesheet" href="<?=$baseUrl.'css/screen.css'?>" media="screen, projection" />
<link type="text/css" rel="stylesheet" href="<?=$baseUrl.'css/print.css'?>" media="print" />
<script type="text/javascript" src='/js/jquery.min.js'></script>
<script type="text/javascript" src="<?=$baseUrl.'js/lib/modernizr-plus-has-flash.min.js'?>"></script>
<script type="text/javascript" src="<?=$baseUrl . 'js/jquery.jplayer.min.js'?>"></script>

<script type="text/javascript">

(function() {
	var a = ['section', 'article', 'nav', 'header', 'footer' , 'aside'];
    for (var i = 0, j = a.length; i < j; i++) {
        document.createElement(a[i]);
    }
})();

</script>

<script type="text/javascript">
jQuery(function(){
	jQuery('.play').toggle(
				mediaPlay,
				mediaStop
		);
});

var mediaStop=function(){
	jQuery('#jquery_jplayer_1').jPlayer("stop"); // stop audio
}
var mediaPlay=function(){
	var url='/index.php/media/play';
	jQuery.ajax({
		type : "post",
		url: url,
		//dataType:"json",
		dataType:'text',
		//data: {'orderItemId':orderItemId,'refundStatus':refundStatus,'email':email},
		success : function(html) {
			jQuery('#audioContainer').html(html);
			jQuery('#audioContainer').fadeOut();
			//if(jsonObj.success){
			//	var data=jsonObj.result;
			//	var refundStatusId="#orderItemsRefundStatus_"+orderItemId;
			//	jQuery(refundStatusId).html(data.refundStatus);
			//}else{
			//	showError("fail");
			//}
		}
	});

}
</script>
<script type="text/javascript">
jQuery(function(){
	jQuery("#_tab-3").click(function(){
		$data=0;
		tabshow('tab-3','/vocabulary',$data);
	});;
	jQuery("#_tab-4").click(function(){
		$data=0;
		tabshow('tab-4','/grammar',$data);
	});
	jQuery("#_tab-6").click(function(){
		$data=0;          
		tabshow('tab-6','/expansion',$data);
	});
});

function tabshow(id,url,data){
	jQuery.ajax({
		type : "post",
		url: url,
		//dataType:"json",
		dataType:'text',
		//data: {'orderItemId':orderItemId,'refundStatus':refundStatus,'email':email},
		success : function(html) {
			jQuery('#'+id).html(html);

		}
	});


	
}

</script>
</head>
<body>
<!-- #BeginEditable "body" -->
<div class="top-bar">
	<div class="content">
		<div class="user-info">
			<a href="#">Logout</a>
			<span>Welcome thomaspeng@gmail.com</span>
		</div>
	</div>
</div>
<div id="page-wrapper">
	<div id="page">
	
		<HEADER>
			<div class="brand">
				<h1>
					<a href="#" title="">
						LOGO
					</a>
				</h1>
			</div>
			<nav class="primary">
				<ul>
					<li><a href="#" title="">Home</a></li>
					<li><a href="#" title="">Store</a></li>
					<li><a href="#" title="">Community</a></li>
					<li><a href="#" title="">Tools</a></li>
					<li><a href="#" title="">Help Center</a></li>
				</ul>
			</nav>
			<div class="global-search">
				<input type="text" placeholder="Search Lesson & Dictionary" />
				<input type="submit" value="SEARCH" />
			</div>
		</HEADER>
			
		<div id="body">

	
			<div class="content">
				<div class="breadcrumb">
					<ul>
						<li><a href="#">Dashboard</a></li>
						<li class="split">&gt;</li>
						<li><a href="#">Beginner</a></li>
						<li class="split">&gt;</li>
						<li><a href="#">Learn Chinese</a></li>
						<li class="split">&gt;</li>
						<li>Lesson - Long time no see</li>
					</ul>
				</div>
	
				<div class="banner">
					
				</div>
				<h1 class="title">Beginner -- Long time no see</h1>
				<div class="main-wrap">
					
					<section class="main">
						<div class="tabs">
							<ul>
								<li style="z-index:10;"><a href="#" title="" rel="tab-1"><span>Discussion</span></a></li>
								<li style="z-index:9;"><a href="#" title="" rel="tab-2" class="active"><span>Dialogue</span></a></li>
								<li style="z-index:8;"><a href="#" id='_tab-3' title="" rel="tab-3"><span>Vocabulary</span></a></li>
								<li style="z-index:7;"><a href="#" id='_tab-4' title="" rel="tab-4"><span>Grammar</span></a></li>
								<li style="z-index:6;"><a href="#" id='_tab-5' title="" rel="tab-5"><span>Exercies</span></a></li>
								<li style="z-index:5;"><a href="#" id='_tab-6' title="" rel="tab-6"><span>Expansion</span></a></li>
								<li style="z-index:4;"><a href="#" id='_tab-7' title="" rel="tab-7"><span>Classes</span></a></li>
							</ul>
						</div>
						<div class="tab-panel">
							<div class="tab-content" id="tab-1"></div>
							<div class="tab-content active" id="tab-2">
								<hgroup>
									<h1>Dialogue</h1>
									<h3>Subtitle</h3>
								</hgroup>
								<article class="dialogue">
								<?php // var_dump($dialogs);?>
								<?php foreach ( $dialogs as $key => $dialog ) :?>
								<div class="row">
										<ul>
											<li><?=(1==$key%2)?'B':'A'?>：</li>
											<?php //foreach ($dialog ['source'] as $key=>$source):?>
												<li><span><?=$source ?></span>
													<div class="popup">
														<table>
														<tr>
														<td>
														</td>
														</tr>
														</table>
													</div>
												
												</li>
											<?php // endforeach;?>
											<li><span>好久不见</span>
												<div class="popup">
													<table>
														<tr>
															<td>好久不见</td>
														</tr>
														<tr>
															<td>好久不見</td>
														</tr>
														<tr>
															<td>hao jiu bu jian</td>
														</tr>
														<tr>
															<td>Long time no see</td>
														</tr>
													</table>
												</div>
											</li>
										</ul>

										<a href="javascript:void(0)" class="play">Play</a>
								</div>
								<?php endforeach; ?>
								<?php foreach ( $dialogs as $key => $dialog ) :?>
								<div class="row">
										<ul>
											<li><?=(1==$key%2)?'B':'A'?>：</li>
											<li>嗨，</li>
											<li><span>好久不见</span>
												<div class="popup">
													<table>/
														<tr>
															<td>好久不见</td>
														</tr>
														<tr>
															<td>好久不見</td>
														</tr>
														<tr>
															<td>hao jiu bu jian</td>
														</tr>
														<tr>
															<td>Long time no see</td>
														</tr>

													</table>
												</div>
											</li>
										</ul>

										<a href="javascript:void(0)" class="play">Play</a>
								</div>
								<?php endforeach; ?>
									<div class="row">
										<ul>
											<li>A：</li>
											<li>嗨，</li>
											<li><span>好久不见</span>
												<div class="popup">
													<table>/
														<tr>
															<td>好久不见</td>
														</tr>
														<tr>
															<td>好久不見</td>
														</tr>
														<tr>
															<td>hao jiu bu jian</td>
														</tr>
														<tr>
															<td>Long time no see</td>
														</tr>

													</table>
												</div>
											</li>
										</ul>

										<a href="#" class="play">Play</a>
									</div>
									<div class="row">
										<ul>
											<li>B：</li>
											<li><span>好久不见！</span>
												<div class="popup">
													<table>
														<tr>
															<td>好久不见</td>
														</tr>
														<tr>
															<td>好久不見</td>
														</tr>
														<tr>
															<td>hao jiu bu jian</td>
														</tr>
														<tr>
															<td>Long time no see</td>
														</tr>

													</table>
												</div>

											</li>
											<li><span>你好吗？</span>
												<div class="popup">
													<table>
														<tr>
															<td>你好吗</td>
														</tr>
														<tr>
															<td>你好嗎</td>
														</tr>
														<tr>
															<td>ni hao ma</td>
														</tr>
														<tr>
															<td>how are you</td>
														</tr>

													</table>
												</div>

											</li>
										</ul>

										<a href="#" class="play">Play</a>
									</div>
									<div class="row">
										<ul>
											<li>A：</li>
											<li>我很忙。</li>
											<li>你呢？</li>
										</ul>

										<a href="#" class="play">Play</a>
									</div>
									<div class="row">
										<ul>
											<li>B：</li>
											<li>我也很忙。</li>
										</ul>

										<a href="#" class="play">Play</a>
									</div>

								</article>
							</div>
							<div class="tab-content" id="tab-3">
							
							</div>
							<div class="tab-content" id="tab-4">
							
							</div>
							<div class="tab-content" id="tab-5">
							
							</div>
							<div class="tab-content" id="tab-6">
							
							</div>
							<div class="tab-content" id="tab-7">
							
							</div>
						
						</div>
					
					
					</section>
					<aside class="primary">
						<div class="grid media">
							<figure>
								<img src="<?=$mediaPath.'haojiubujian.jpg' ?>" title="" alt="" width="230" height="140" />
							</figure>
							<audio src="http://www.w3school.com.cn/i/horse.ogg" controls="controls">Your browser does not support the audio element.</audio>
							<a href="#">Subscribed/Active</a>
						</div>
						<div class="grid">
							<h3>Lesson Review Downloads</h3>
							<div class="lesson-list">
								<ul>
									<li style="background-image:url('media/icon.jpg');"><a href="#" title="">Full Lesson (Radio Quality, 5.61mb)</a></li>
									<li style="background-image:url('media/icon.jpg');"><a href="#" title="">Full Lesson (Radio Quality, 5.61mb)</a></li>
									<li style="background-image:url('media/icon.jpg');"><a href="#" title="">Full Lesson (Radio Quality, 5.61mb)</a></li>
									<li style="background-image:url('media/icon.jpg');"><a href="#" title="">Full Lesson (Radio Quality, 5.61mb)</a></li>
									<li style="background-image:url('media/icon.jpg');"><a href="#" title="">Full Lesson (Radio Quality, 5.61mb)</a></li>
									<li style="background-image:url('media/icon.jpg');"><a href="#" title="">Full Lesson (Radio Quality, 5.61mb)</a></li>
									<li style="background-image:url('media/icon.jpg');"><a href="#" title="">Full Lesson (Radio Quality, 5.61mb)</a></li>
								</ul>
							</div>
						</div>
						<div class="grid">
							<h3>Lesson Information</h3>
							<div class="lesson-info">
								<table>
									<tr>
										<td>Hosts:</td>
										<td>Jenny John</td>
									</tr>
									<tr>
										<td>ID:</td>
										<td>1656</td>
									</tr>
									<tr>
										<td>Diffculty:</td>
										<td>Newbie</td>
									</tr>
									<tr>
										<td>Published:</td>
										<td>April 22, 2011</td>
									</tr>
									<tr>
										<td>Topics:</td>
										<td><a href="#">jobs</a>, <a href="#">greetings</a></td>
									</tr>
									<tr>
										<td>Functions:</td>
										<td><a href="#">Answering question</a>, <a href="#">asking questions</a>, <a href="#">greetings</a></td>
									</tr>

								</table>
							</div>
						</div>
					
					</aside>
					
					
				</div>
			</div>	
		
		</div>
		<footer>
			<nav class="footer-nav">
				<ul>
					<li><a href="#" title="">Home</a></li>
					<li><a href="#" title="">Store</a></li>
					<li><a href="#" title="">Community</a></li>
					<li><a href="#" title="">Tools</a></li>
					<li><a href="#" title="">Help Center</a></li>
				</ul>

			</nav>
			<div class="social-link">
<span class='st_facebook_hcount' displayText='Facebook'></span>
<span class='st_twitter_hcount' displayText='Tweet'></span>
<span class='st_googleplus_hcount' displayText='Google +'></span>
			</div>
		</footer>		
	</div>
</div>
<!-- #EndEditable -->
<script type="text/javascript"  src="<?=$baseUrl.'js/lib/jquery-1.6.2.min.js'?>"></script>
<script type="text/javascript" src="<?=$baseUrl.'js/live/dev.debug.js'?>"></script>
<!-- <script type="text/javascript" src="themes/default/js/live/prod.min.js"></script> -->
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "ur-a7238e7-7fc2-53ee-47bc-d0696acaf9bd"}); </script>
</body>
<!-- #EndTemplate -->
</html>